<template>
  <!-- 查看活动详情弹框 -->
  <el-dialog class="activeUserList_dialog"
  :visible.sync="visible" title="活动详情" 
  @close="cancel" :close-on-click-modal="false" 
  :close-on-press-escape="false" :append-to-body="true"
  style="overflow: hidden;">
  <div class="duesUserList_btn">
        <el-button type="primary" @click="modify" class="jiaofei">更改活动状态</el-button>
        <el-select @change="isparticipate" v-model="isPresent" clearable placeholder="是否参加">
            <el-option v-for="item in pateList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <el-table class="duesUserList_table" height="400" border ref="multipleTable" :data="suerList"
        tooltip-effect="dark" @selection-change="handleChange">
            <el-table-column type="selection"
            width="55"></el-table-column>
            <el-table-column label="姓名">
                <template slot-scope="scope">{{ scope.row.userName }}</template>
            </el-table-column>
            <!-- <el-table-column label="缴费时间">
                <template slot-scope="scope">{{ scope.row.feeTime }}</template>
            </el-table-column> -->
            <el-table-column label="是否参加">
                <template slot-scope="scope">{{ scope.row.isPresent }}</template>
            </el-table-column>
        </el-table>
    </div>
  </el-dialog>
</template>

<script>
export default {
    data(){
        return{
            visible:false,
            pateList:[{
                    id:0,
                    name:"未参加"
                },{
                    id:1,
                    name:"已参加"
                }
            ],
            isPresent:"",
            suerList:[],//活动人员名单
            userListId:[],//选中的用户的id
        }
    },
    mounted(){},
    methods:{
        init(id){
            // console.log(localStorage.getItem("token"))
            this.visible = true
            // console.log(id)
            this.activeid = id
            this.activeuser()
        },
        activeuser(){//获取活动人员名单
            this.axios({
                headers:{'Authentication':localStorage.getItem('token')},
                method:"get",
                url:`/activity/getActivityUserList?activityId=${this.activeid}&isPresent=${this.isPresent}`,
            }).then(res=>{
                if (res.data.code != 20001) {
                    return this.$message.error(res.data.msg);
                }
                this.suerList = res.data.data.list
                this.suerList.forEach(item=>{
                    if(item.isPresent==0){
                        item.isPresent = "未参加"
                    }
                    else{
                        item.isPresent = "已参加"
                    }
                })
            })
        },
        modify(){//点击更改活动状态按钮
            var joinActivityDto = {
                activityId:this.activeid,
                joinUserIdList:this.userListId
            }
            this.$confirm('确定更改已选人员活动状态？','提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.axios({
                    headers:{'Authentication':localStorage.getItem('token')},
                    method:"put",
                    url:`/activity/joinActivityUserList`,
                    data:joinActivityDto
                }).then(res=>{
                    if (res.data.code != 20001) {
                        return this.$message.error(res.data.msg);
                    }
                    this.activeuser()
                })
                this.$message({
                    type: 'success',
                    message: '更改成功!'
                });
            }).catch(()=>{
                this.$message({
                    type: 'info',
                    message: '已取消!'
                });
            })
        },
        isparticipate(e){//是否参加下拉框
            this.isPresent = e
            this.activeuser()
        },
        cancel(){//关闭弹框
            this.visible = false
        },
        handleChange(val){//
            val.forEach(item=>{
                this.userListId.push(item.id)
            })
        }
    }
}
</script>

<style lang="scss">
    .activeUserList_dialog{
        .el-dialog{
            height: 78vh;
        }
        .jiaofei{
            margin-right: 1vw;
        }
        .duesUserList_table{
            margin-top: 2vh;
        }
    }
</style>